<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons"
          style="color: #fff"
          @tap.stop="handleNavBack"
          >&#xe600;</view
        >
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff"
          >提币明细</view
        >
        <!-- 右侧按钮 -->
        <view class="icons grace-icons grace-flex-center"></view>
      </view>
    </cloudHeader>
    <view class="container">
      <block v-for="item in withdrawList.data" :key="item.id">
        <view class="detail_box">
          <view class="flex al_center" style="margin-bottom: 10rpx">
            <view class="flex1 symbol_name">{{ item.symbol }}提币</view>
            <view class="number">-{{ item.num }}</view>
          </view>
          <view class="flex al_center">
            <view class="flex1 date">{{
              item.created_at | moment("YYYY-MM-DD HH:mm:ss")
            }}</view>
            <view class="status">{{ item.state_text }}</view>
          </view>
        </view>
      </block>
      <graceLoading
        :loadingType="
          loading['my.withdraw_list'] ? 1 : withdrawList.has_next_page ? 0 : 2
        "
      ></graceLoading>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    ...mapActions("mf/my", ["loadWithdrawList"]),
  },
  computed: {
    ...mapGetters("mf/my", ["withdrawList"]),
  },
  async onLoad() {
    this.isLoading = true;
    await this.loadWithdrawList();
    this.isLoading = false;
  },
  onReachBottom() {
    //避免多次触发
    if (this.withdrawList.has_next_page && !this.loading["my.withdraw_list"]) {
      this.loadWithdrawList({
        page: this.withdrawList.current_page + 1,
      });
    }
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.detail_box {
  width: 100%;
  height: 154rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  margin-bottom: 20rpx;
  padding: 30rpx 40rpx 0;
  box-sizing: border-box;
}
.symbol_name {
  font-size: 28rpx;
  font-weight: 300;
  color: #ffffff;
}
.number {
  font-size: 34rpx;
  font-weight: 300;
  color: #fee096;
}
.date {
  font-size: 24rpx;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
}
.status {
  font-size: 24rpx;
  font-weight: 400;
  color: #ffffff;
}
</style>